<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      show-action
      @search="onSearch"
      @input="onInput"
      @cancel="onCancel"
      v-on:clear="onCancel"
    />
    <div v-show="isShowSearch">
      <div class="top">
        <span>历史记录</span>
        <van-icon name="delete" v-on:click="dHis" />
      </div>
      <div class="tagList">
        <van-tag
          v-for="(item, index) in searchList"
          :key="index"
          v-on:click="clickTag(item)"
          >{{ item }}</van-tag
        >
      </div>
    </div>
    <van-cell-group v-model="a" v-show="isLoading">
      <van-cell
        :title="item.goods_name"
        v-for="(item, index) in goodslist"
        :key="index"
      />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      a: 0,
      queryInfo: {
        query: ""
      },
       goodslist: [],
      // 搜索框的值
      value: "",
      goods_name: "",
      // 没有搜索历史的显示与隐藏
      isSearch: true,
      //搜索历史标签循环的数组
      searchList: [],
      // 搜索结果的数组
      ss: [],
      // 搜索结果的显示与隐藏
      isLoading: false,
      // 控制除了搜索框以外的显示与隐藏
      isShowSearch: true,
      // 商品列表的显示
      show: false
    };
  },
  methods: {
    onCancel() {
      // 点击取消按钮
      this.value = "";
      // 搜索框的值为空
      this.isLoading = false;
      // 搜索结果隐藏
      this.isShowSearch = true;
      // 其他的显示
    },

    async onInput() {
      // 如果搜索框的值为空，则跳出
      if (this.value.trim().length === 0) {
        this.value = "";
        return;
      }
      // 搜索结果框显示
      this.isLoading = true;
      // 除了搜索框其他隐藏
      this.isShowSearch = false;
      // 发送请求 获取搜索数据 赋值给ss数组，用来循环
      this.queryInfo.query = this.value;
      const { data: res } = await this.$http.get("/goods/search", {
        params: this.queryInfo
      });
      this.goodslist = res.message.goods;
      // console.log(this.value);
      // console.log(this.goodslist);
      this.ss = res.message;
      var index = this.searchList.findIndex(i => {
        return i == this.value;
      });
      // 如果搜索到了则将他删除
      if (index !== -1) {
        this.searchList.splice(index, 1);
      }
      // 把搜索框的值添加到数组
      this.searchList.unshift(this.value);
      if (this.searchList.length > 5) {
        this.searchList.splice(5, 1);
      }
      // 储存到localstorage中
      var arr = this.searchList;
      window.localStorage.setItem("history", JSON.stringify(arr));
    },
  // 搜索请求
   onSearch() {
      // console.log(1);
     this.$router.push({
        path: "/pages/goods_list",
        query: {
          query: this.value
        }
      });
    },

    isH() {
      // 调用这个函数来检测本地中有没有搜索历史
      var s = JSON.parse(window.localStorage.getItem("history"));
      if (s && s.length > 0) {
        this.isSearch = false;
        this.searchList = s;
      } else {
        this.isSearch = true;
      }
    },
    // 点击删除搜索历史
    dHis() {
      // 清空本地和当前的数组
      this.searchList = [];
      window.localStorage.setItem("history", "[]");
      this.isSearch = true;
    },
    // 历史记录传参
    clickTag(a) {
      this.value = a;
    }
  },
  created() {
    // 创建时调用
    this.isH();
  }
};
</script>

<style lang="less" scoped>
.van-icon-delete {
  position: absolute;
  top: 113px;
  right: 10px;
}
.top {
  padding: 0px 10px;
  font-size: 14px;
}
.tagList {
  padding: 10px;
}
.van-tag--default {
  padding: 5px 8px;
  margin-left: 8px;
}
</style>
